<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>命令操作</title>

    <jsp:include page="common/common_head.jsp"></jsp:include>


</head>
<body  data-spy="scroll" data-target=".navbar">


<c:if test="${!log}">
    <jsp:include page="common/common_banner_app.jsp"></jsp:include>
</c:if>

<div style="height:30px"></div>
<div class="container">

    <table class="table  table-striped table-bordered table-hover " id="inputTable">

        <thead>
            <tr>
                <th >描述</th>
                <th>值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>服务器</td>
                <td>


                    <div class="input-prepend">
                        <span class="add-on">应用</span>
                        <select id="appName" onchange="getSlave()" id="appName">
                            <c:forEach items="${apps}" var="c">
                                <option value="${c}">${c}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div class="input-prepend">
                        <span class="add-on">服务器</span>
                        <select id="slave">
                            <option value="all">全部</option>
                        </select>
                    </div>

                </td>
            </tr>

                <tr>
                    <td>操作</td>
                    <td>
                        <select id="action">

                            <c:if test="${!log}">
                                <option value="shell">shell</option>
                                <option value="cycleShell">循环执行shell</option>
                                <option value="start">启动</option>
                                <option value="stop">停止</option>
                                <option value="restart">重启</option>
                                <option value="upgrade">升级</option>
                            </c:if>
                            <option value="log">查看日志</option>
                        </select>
                    </td>
                </tr>

            <c:if test="${!log}">
                <tr>
                    <td>参数</td>
                    <td><input type="text" id="param" placeholder="参数/shell" style="width: 90%"></td>
                </tr>
            </c:if>
            <tr>
                <td colspan="2">

                    <div class="span4">
                        <button class="btn btn-large btn-block btn-primary" type="button" onclick="start()" id="submitBtn">执行</button>

                    </div>


                </td>
            </tr>
        </tbody>
    </table>

    <div id="result">


    </div>


</div>
</body>





	<jsp:include page="common/common_js.jsp"></jsp:include>




	<script>

        var resultId = 0;
        var stop = true;

        function getSlave(){
            var appName = $("#appName").val()
            $.ajax({
                url: "/appManager/appSlave.html",
                type: "get",
                dataType: "json",
                data: {"appName": appName},
                success: function(data){

                    //alert(123)
                        var obj = $("#slave")
                        obj.empty()
                        obj.append("<option value='all'>全部服务器</option>")
                        $.each(data, function(i, n){
                            obj.append("<option value='" + n + "'>" + n + "</option>")

                        })
                   // obj.append("<option value='192.168.4.201'>192.168.4.201</option>")


                },
                error: function(i,j){
                  //alert(i + "\n" + j)
                },
                complete: function(){
                    //alert(111)
                    submitShell();
                }
            })
        }

        function start(id){
            if(typeof id == "undefined")
                id = null;

            var action = $("#action").val();
            var param = $("#param").val();
            var appName = $("#appName").val();
            var slave = $("#slave").val();

            if(stop == false){

                stop = true;
                $("#submitBtn").html("执行");
                return;
            }



            if(appName == "all" && action != "shell" && action != "cycleShell"){

                alert("只能对全部服务器执行shell命令!")
                return;
            }
            if((action == "shell" || action == "cycleShell") && param == ""){
                alert("没有可以执行的脚本");
                return;
            }

            if(action == "log" || action == "cycleShell"){

                if(stop == true){
                    stop = false;
                    $("#submitBtn").html("停止")
                }else{
                    stop = true;
                    $("#submitBtn").html("执行")

                }
            }

            if(action == "upgrade" && param == ""){
                alert("没有指定版本");
                return;
            }

            if(id == null)
                $("#result").empty()
            if("all" != slave){

                startASlave(id, appName, slave, action, param)
            }else{

                $("#slave option").each(function(i, n){

                    var local = $(n);
                    if(local.val() != "all"){
                        startASlave(id, appName, local.val(), action, param)
                    }
                })
            }

        }

        function startASlave(id, appName, slave, action, param){

            if(id == null){
                id =  "id_" + resultId++;
                var height = 100;
                if($("#slave").val() != "all"){
                    height = 800;
                }
                $("#result").append("<div class='well'><b>" + slave+"</b></br><textarea id='" + id +"' style='width:95%;height:" + height + "px'>开始执行</textarea></div>")
            }

            $.ajax({
                url: "/appManager/appShell.html",
                data: {"slave": slave, "action": action == "cycleShell" ? "shell" : action,  "param": param, "appName": appName},
                dataType: "json",
                success: function(r){
                    //alert(r);
                    if(r.length > 0){

                        var area = $("#" + id)
                        area.html(r[0].message)



                        if(autoScroll(area))
                            area.scrollTop(area[0].scrollHeight);
                    }

                },
                complete: function(){

                        if(action == "log" || action == "cycleShell"){

                            if(stop == false){
                                setTimeout(function(){
                                    startASlave(id, appName, slave, action, param);
                                }, 1500)
                            }


                        }else if(action != "shell"){
                            $("#action [value='log']").attr("selected",true);

                            if(stop){
                                stop = false;
                                $("#submitBtn").html("停止");
                            }

                            setTimeout(function(){
                                startASlave(id, appName, slave, "log", param);
                            }, 2000)

                        }



                }
            })

        }

        function autoScroll(obj){
            var viewH = obj.height();//可见高
            var contentH = obj[0].scrollHeight;//内容高度
            var scrollTop = obj.scrollTop();//滚动高度
            if(scrollTop == 0 || (contentH - viewH - scrollTop <= 100)) { //到达底部100px时,加载新内容
            //if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
                    return true;

            }else{
                return false;
            }

        }

        var autoSubmit = false
        function submitShell(){

            if("${host}" != "")
                $("#slave [value='${host}']").attr("selected",true)


            if(autoSubmit)
                start()
            else
                autoSubmit = false


        }
        $(document).ready(function(){






            if("${action}" != "")
                $("#action [value='${action}']").attr("selected",true)

            if("${appName}" != ""){
                $("#appName [value='${appName}']").attr("selected",true)
                getSlave();
            }else{
                getSlave();
            }



            if("${appName}" != "" && "${action}" != "")
                autoSubmit = true


            $('#inputTable').bind('keypress', function(e) {

                var code = e.keyCode || e.which;
                if(code == 13) { //Enter keycode
                    start();
                }
            });
            $("#param").focus();
        })



	</script>
</body>
</html>